<template>
  <div class="serve-detalil flex-col flex-y-center">
    <div class="serve-detalil-text flex-col">
      <div class="text-align">
        <h2>服务详情</h2>
      </div>

      <div>
        <h3>服务内容：</h3>
        <ol>
          <li>厨房、卫生间、餐厅、客厅、卧室、书房、阳台、储物间、浴室</li>
        </ol>
        <h3>注意事项:</h3>
        <ol>
          <li>
            本服务不包含：擦玻璃、油烟机清洗、家电拆卸清洗、贵重、易碎物品的擦拭、不登高做天花板、吊灯吊顶的清洁擦拭、洗衣做饭、叠衣服洗碗、照顾老人、接送小孩、遛宠物。
          </li>
          <li>
            请您谅解不要让工作人员做超范围服务，造成双方不必要的损失，本服务仅适用于居家日常的表面清洁，避免上门后超范围不能服务，造成空跑。
          </li>
          <li>常用清洁用品：需要客户自备或让工作人员代买。</li>
        </ol>
      </div>
    </div>

    <div class="descriptions-view">
      <h3>​预约时长参考：</h3>
      <el-table :data="tabledata" border>
        <el-table-column
          prop="mj"
          label="面积"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="date"
          label="耗时"
          align="center"
        ></el-table-column>
      </el-table>
    </div>

    <div class="flex-y-center next-but flex-x-reverse">
      <el-button @click="nextchange" type="primary" style="width: 200px"
        >下一步</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRow: false,
      tabledata: [
        {
          mj: "0-60平方米",
          date: "2-3小时",
        },
        {
          mj: "61-120平方米",
          date: "3-4小时",
        },
        {
          mj: "121-200平方米",
          date: "4-5小时",
        },
      ],
    };
  },
  methods: {
    nextchange() {
      this.$router.push({
        name: "rcbj-form",
        query: {
          stepsactive: 3,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.serve-detalil {
  width: 100%;
  border: 1px solid #e4e7ed;
  padding: 20px;
  overflow-y: scroll;
  box-shadow: inset 0 0 10px rgba(172, 172, 172, 0.5);

  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }

  .serve-detalil-text {
    width: 70%;

    h3 {
      line-height: 40px;
    }

    ol li {
      line-height: 30px;
      margin-left: 20px;
    }
  }

  .descriptions-view {
    width: 70%;
    margin-top: 30px;

    h3{
      margin-bottom: 20px;
    }
  }
}
.next-but {
  width: 100%;
  margin-top: 30px;
  margin-right: 50px;
}
</style>
